<template>
    <v-row style="height: 100%" >
      <!-- 文章列表 -->
      <v-col :cols="4"><List @change="listChange"></List></v-col>
      <!-- 编辑区 -->
      <v-col :cols="8">
          <v-row>
            <v-col :cols="11">
              <v-text-field
                v-model="obj.title"
                hide-details
                label="博文标题"
                placeholder="请输入标题"
                @input="titleInput"
              ></v-text-field>
            </v-col>
            <!-- <v-col :cols="11">
              <v-tabs
                dark
                show-arrows
                center-active
              >
                <v-tabs-slider color="select"></v-tabs-slider>
                <v-tab
                  v-for="(item, index) in tabList"
                  :key="index"
                > {{item.title}}<v-icon>mdi-close</v-icon>
                </v-tab>
              </v-tabs>
            </v-col> -->
            <v-col :cols="1">
              <div style="font-size: 30px">
                <span v-if="tips == '已保存'" class="success--text">
                  <v-tooltip v-model="isTipsSuccess" bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <i v-bind="attrs" v-on="on" class="el-icon-check"></i>
                    </template>
                    <span>保存成功<v-icon class="success--text">mdi-baby-face-outline</v-icon></span>
                  </v-tooltip>
                </span>
                <span v-if="tips == '输入中'" class="info--text">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <i v-bind="attrs" v-on="on" class="el-icon-edit"></i>
                    </template>
                    <span>输入中</span>
                  </v-tooltip>
                </span>
                <span v-if="tips == '保存中'" class="error--text">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <i v-bind="attrs" v-on="on" class="el-icon-loading"></i>
                    </template>
                    <span>保存中</span>
                  </v-tooltip>
                </span>
              </div>
            </v-col>
          </v-row>
          <MarkdownPro
            v-model="obj.context"
            style="height: 765px"
            v-on:input2="contextInput"
          />
      </v-col>
    </v-row>
</template>
<script>
import MarkdownPro from "@/components/markdown/components/pro";
import List from "./components/edit/List";
import { articleSave } from '@/api/article/article'
export default {
  components: {
    MarkdownPro,
    List,
  },
  data() {
    return {
      // 文档内容
      obj: {
        title: "",
        context: "",
      },
      contextTimeObj: null,
      titleTimeObj: null,
      tips: "已保存",
      isTipsSuccess: false,
      tabList: []
    };
  },
  methods: {
    listChange(val){
      this.tabList.push(val)
      this.obj = val;
    },
    /**
     * 内容 1 秒自动保存
     */
    contextAutoSave(val, id) {
      if (this.contextTimeObj) {
        clearTimeout(this.contextTimeObj);
      }
      this.contextTimeObj = setTimeout(() => {
        this.tips = "保存中";
        articleSave({
            articleId: id,
            context: val,
          }).then(() => {
            this.tips = "已保存";
            this.isTipsSuccess = true;
            setTimeout(()=>{this.isTipsSuccess = false},2000)
        })
      }, 1000);
    },
    /**
     * 标题 1 秒自动保存
     */
    titleAutoSave(val, id) {
      if (this.titleTimeObj) {
        clearTimeout(this.titleTimeObj);
      }
      this.titleTimeObj = setTimeout(() => {
        this.tips = "保存中";
        articleSave({
            articleId: id,
            title: val,
          }).then(() => {
            this.tips = "已保存";
            this.isTipsSuccess = true;
            setTimeout(()=>{this.isTipsSuccess = false},2000)
        })
      }, 1000);
    },
    /**
     * 监听标题输入
     */
    titleInput() {
      this.tips = "输入中";
      this.titleAutoSave(this.obj.title, this.obj.articleId);
    },
    /**
     * 监听内容输入
     */
    contextInput() {
      this.tips = "输入中";
      this.contextAutoSave(this.obj.context, this.obj.articleId);
    },
  },
};
</script>

<style scoped>
</style>
